<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-23 15:02:32
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  >
    <div ref="box" style="position: absolute; width: 100%; height: 100%"></div>
    <Widget
      class="flex"
      :class="['justify-' + info.extension.justifyAlign.value, 'flex-' + info.extension.flexDer.value]"
      :list="info.list"
      :style="{
        alignItems: info.extension.itemsAlign.value,
      }"
    />
  </div>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiStart',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        timer: null,
      }
    },
    watch: {
      info: {
        handler() {
          this.init()
        },
        deep: true,
      },
    },
    created() {},
    mounted() {
      this.init()
    },
    beforeUnmount() {
      this.timer && clearInterval(this.timer)
    },
    methods: {
      init() {
        var x = this.$refs.box.clientWidth - 50
        var y = this.$refs.box.clientHeight - 50
        this.$refs.box.innerHTML = ''
        for (var i = 0; i < 60; i++) {
          var spans = document.createElement('span')
          this.$refs.box.appendChild(spans)
          spans.style.width = '20px'
          spans.className = 'start'
          spans.style.height = '20px'
          spans.style.background = `url(${this.info.extension.start.value})`
          spans.style.position = 'absolute'
          spans.style.backgroundSize = '100%'
          spans.style.animation = 'star 1s alternate infinite'
          spans.style.left = x * Math.random() + 'px'
          spans.style.top = y * Math.random() + 'px'
          //使星星不同时闪烁
          var randomDelay = Math.random() * 2
          spans.style.animationDelay = randomDelay + 's'
          //使星星大小不一
          var randomRota = Math.random() * 1.5
          spans.style.transform = 'scale(' + randomRota + ',' + randomRota + ')'
        }
      },
    },
  })
</script>
<style lang="scss">
  .uiStart {
    width: 100%;
    height: 100%;
    position: relative;
  }
  @keyframes star {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>
